<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.2.1.js"></script>
		<style>
			
			.box{
				font-size:12px;
				color: #ccc;
				width: 670px;
				height: 126px;
				margin: 0 auto;
				background: url(img/bg.jpg) no-repeat;
				position: relative;
			}
			.menu-nav{
				list-style: none;
				position: absolute;
				left: 580px;
				top:2px;
				cursor: pointer;
			}
			#wo{
				margin-top: 2px;
			}
			#meun{
				background:white;
				margin-top: -12px;
				margin-left: 0px;
				padding-left: 4px;
				padding-right: 4px;
				width: 50px;
				display: none;
			}
			.menu-nav li{
				text-align: center;
				display: block;
				height: 25px;
				line-height: 25px;
			}
		</style>
		<script src="jquery-3.2.1.js"></script>
	</head>
	<body>
		<div class="box">
			<div id="nav" class="menu-nav">
				<p id="wo">我的当当</p>
				<ul id="meun">
					<li>我的订单</li>
					<li>我的收藏</li>
					<li>我的礼品卡</li>
					<li>我的积分</li>
					<li>我的余额</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		$(document).ready(function(){
			$("#nav").mouseover(function(){
				$("#nav").css("border","1px solid #EE7304");
				$("#meun").show();
			}).mouseout(function(){
				$("#nav").css("border","none");
				$("#meun").hide();
			})
		});
	</script>
</html>
